<template>
  <div class="container">
    <van-nav-bar title="搜素结果" fixed>
      <template #left>
        <!-- 后退按钮 -->
        <van-icon
          name="arrow-left"
          color="white"
          size="0.48rem"
          class="goback"
          @click="$router.back()"
      /></template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="show">
        <ArticleList
          @click.native="jumpToArticle(item.art_id)"
          v-for="item in searchRes"
          :key="item.art_id"
          :item="item"
        ></ArticleList>
      </div>
    </van-list>
  </div>
</template>

<script>
import { searchRequset } from "@/api/search";
import ArticleList from "@/components/ArticleItem.vue";
export default {
  name: "searchResult",
  data() {
    return {
      page: 1,
      searchRes: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    jumpToArticle(id) {
      console.log(11);
      this.$router.push({ path: `/article?art_id=${id}` });
    },
    async onLoad() {
      this.page++;
      console.log(this.page);
      if (this.searchRes.length > 0) {
        const res = await searchRequset({
          page: this.page,
          q: this.$route.params.value,
        });
        if (res.data.data.results.length == 0) {
          this.finished = true;
          return;
        }
        this.searchRes = [...this.searchRes, ...res.data.data.results];
      }
      this.loading = false;
    },
  },
  async created() {
    const res = await searchRequset({
      page: this.page,
      // per_page: 2000, // 加大请求量 测试最后一次请求 寻找加载结束条件
      q: this.$route.params.value,
    });
    console.log(res);
    this.searchRes = res.data.data.results;
  },
  components: {
    ArticleList,
  },
};
</script>

<style lang="less" scoped>
.show {
  margin-top: 46px;
}
</style>
